<template>
    <div class="pagination-box">
        <ul class="pagination pagination-sm">
            <li v-for="one in pageRange" v-on:click="pageClick(one.num)" v-bind:class="one.className">
                <a href="javascript:;">{{one.text}}</a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        props: ['totalItems','currPage','sizePage','prevShow','nextShow'],
        data : function (){
            return {
                pageRange : [],
                t_currPage : this.currPage,
                t_prevShow : this.prevShow,
                t_nextShow : this.nextShow
            }
        },
        watch : {
            totalItems : function (){
                this.getPageRange()
            },
            t_currPage : function (){
                this.getPageRange();
                //this.onChange(this.currPage)
            },
            t_prevShow : function (){
                this.getPageRange()
            },
            t_nextShow : function (){
                this.getPageRange()
            }
        },
        methods : {
            getPageRange : function (){
                this.t_prevShow = parseInt(this.t_prevShow);
                this.t_nextShow = parseInt(this.t_nextShow);

                var start = 0;
                var end = 0;
                var showLen = this.t_prevShow + this.t_nextShow + 1;
                var totalPage = Math.max(Math.ceil(this.totalItems / this.sizePage), 1);
                var currPage = this.currPage;


                if (totalPage <= 1){
                    start = end = 1
                } else if (totalPage <= showLen){
                    start = 1;
                    end = totalPage
                } else {
                    if (currPage <= this.t_prevShow + 1){
                        start = 1;
                        end = showLen
                    } else if (currPage >= totalPage - this.t_nextShow){
                        end = totalPage;
                        start = totalPage - showLen + 1
                    } else {
                        start = currPage - this.t_prevShow;
                        end = currPage + this.t_nextShow
                    }
                }

                this.pageRange = [];

                //上一页
                if (currPage != 1){
                    this.pageRange.push({num:currPage-1, text:'« 上一页'})
                }
                //第一页
                if (start >= 2){
                    this.pageRange.push({num:1, text:1})
                }
                //省略好
                if (start > 2){
                    this.pageRange.push({text:'..'})
                }
                //显示的页码列表
                for (var i=start; i<=end; i++){
                    this.pageRange.push({
                        num : i,
                        text : i,
                        className : (i==currPage) ? 'active' : ''
                    })
                }
                //省略号
                if (end < totalPage-1){
                    this.pageRange.push({text:'..'})
                }
                //最后一页
                if (end <= totalPage-1){
                    this.pageRange.push({num:totalPage, text:totalPage})
                }
                //下一页
                if (currPage != totalPage){
                    this.pageRange.push({num:currPage+1, text:'下一页 »'})
                }
            },
            pageClick : function (i){
                if (!i){
                    return false
                }
                if (i == this.t_currPage){
                    return false
                }

                this.t_currPage = i;
                this.getPageRange();

                this.$emit('pageChange', i);
            }
        },
        mounted : function (){
            this.getPageRange()
        }/*,
        beforeUpdate(){
            var self = this;
            self.t_currPage = self.currPage;

        }*/
    }
</script>

<style lang="less">
    .pagination-box {
        text-align: center;
        .pagination-sm {
            margin: 10px 0px 0px 0px;
            li a {
                padding:5px 8px;
            }
        }
    }
</style>
